<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>props的默认值和验证</title>
</head>

<body>
    <h1>props的默认值和验证</h1>
    <ul>
        <li>使用函数组件.defaultProps定义props的默认值对象。</li>
        <li></li>
        <li></li>
    </ul>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../../node_modules/prop-types/prop-types.js"></script>
<script type="text/babel">

    function Com(props) {
        return (
            <div>我是一个无状态组件，姓名：{props.name}，年龄：{props.age}</div>
        )
    }

    // 定义默认值
    Com.defaultProps = {
        name: "匿名",
        age: 0
    }

    // 定义数据类型
    Com.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
    }

    let human = {
        name: "奉先",
        age: 33,
    }



    let com = <div>
        {<Com />}
        <Com {...human} />
    </div>;

    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById("demoReact"));

    // 渲染组件
    root.render(com);

</script>

</html>